// 导入设计系统 (最优先)
@use './design-system.scss';
@use './mixin.scss';
@use './transition.scss';
@use './element-ui.scss';
@use './sidebar.scss';
@use './btn.scss';
@use './ruoyi.scss';
@use './utilities.scss';
@use './responsive.scss';

// 现代化全局基础样式
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  font-family: var(--font-family-sans);
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  color: var(--color-gray-900);
  background: var(--main-bg-color, var(--color-gray-50));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: var(--transition-base);
}

html.dark body {
  color: var(--color-gray-50);
  background: #000000; // 纯黑色背景
}

// 全局重置样式
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

// HTML基础样式
html {
  height: 100%;
  font-size: 16px;
}

// 应用容器
#app {
  height: 100%;
  width: 100%;
}

// 链接样式
a {
  color: var(--color-brand-600);
  text-decoration: none;
  transition: var(--transition-fast);
  
  &:hover {
    color: var(--color-brand-700);
    text-decoration: underline;
  }
  
  &:focus {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
  }
}

// 通用工具类
.app-container {
  padding: var(--spacing-4) var(--spacing-6);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  background: transparent; // 设置为透明，显示父容器的渐变背景
  
  // 现代化布局优化
  @media (min-width: 1600px) {
    max-width: 1600px;
    padding: var(--spacing-4) var(--spacing-8);
  }
  
  @media (min-width: 1920px) {
    max-width: 1800px;
    padding: var(--spacing-4) var(--spacing-10);
  }
}

.text-center {
  text-align: center;
}

.pointer {
  cursor: pointer;
}

// 过滤器容器
.filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
  padding: var(--spacing-4);
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  
  .filter-item {
    flex: 1;
    min-width: 200px;
  }
}

// Element Plus 组件层级修复
.el-image-viewer__wrapper,
.el-image-viewer__mask,
.el-image-viewer__btn,
.el-image-viewer__canvas,
.el-image-viewer__actions,
.el-image-viewer__close {
  z-index: var(--z-modal) !important;
}

.el-dialog__wrapper,
.el-overlay {
  z-index: var(--z-modal) !important;
}

.el-loading-mask {
  z-index: var(--z-modal-backdrop) !important;
}

// 暗黑模式全局组件适配
html.dark {
  .app-container {
    color: var(--color-gray-50);
    background: transparent; // 暗黑模式下也保持透明
  }
  
  .filter-container {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
    color: var(--color-gray-50);
  }
  
  // 链接颜色
  a {
    color: var(--color-brand-400);

    &:hover {
      color: var(--color-brand-300);
    }
  }
}

// 响应式容器优化
@media (max-width: 1024px) {
.app-container {
    max-width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
  }
}

@media (max-width: 768px) {
  .app-container {
    max-width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
  }
  
  .filter-container {
    .filter-item {
      min-width: 100%;
    }
  }
}

// ========================================
// 页面布局优化 - 减少空白区域
// ========================================

// 表格布局优化
.app-container {
  // 搜索表单优化
  .el-form {
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--main-bg-color, #f8fafc) !important; // 直接使用主题背景色
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  // 操作按钮行优化
  .el-row {
    margin-bottom: var(--spacing-4);
    
    &.mb8 {
      margin-bottom: var(--spacing-4) !important;
      padding: var(--spacing-3);
      background: var(--main-bg-color, #f8fafc) !important; // 直接使用主题背景色
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
  }
  
  // 表格容器优化
  .el-table {
    width: 100%;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
  }
  
  // 紧凑布局选项
  &.compact {
    padding: var(--spacing-2) var(--spacing-4);
    
    .el-form {
      margin-bottom: var(--spacing-3);
      padding: var(--spacing-3);
    }
    
    .el-row {
      margin-bottom: var(--spacing-3);
    }
  }
}

// 暗黑模式下的表单和布局优化
html.dark {
  .app-container {
    .el-form {
      background: #000000 !important; // 纯黑色背景
      border-color: rgba(255, 255, 255, 0.1);
      color: var(--color-gray-200);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .el-table {
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: var(--shadow-lg);
    }
    
    // 按钮行暗黑模式
    .el-row.mb8 {
      background: #000000 !important; // 纯黑色背景
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
}

// 全宽表格模式 - 完全占满屏幕
.full-width-layout {
  .app-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: var(--spacing-2) var(--spacing-3) !important;
    
    @media (min-width: 768px) {
      padding: var(--spacing-3) var(--spacing-4) !important;
    }
    
    @media (min-width: 1024px) {
      padding: var(--spacing-3) var(--spacing-6) !important;
    }
    
    @media (min-width: 1440px) {
      padding: var(--spacing-4) var(--spacing-8) !important;
    }
  }
}

// 超全屏模式 - 完全无边距
.ultra-wide-layout {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: var(--spacing-2) !important;
  box-sizing: border-box !important;
  
  // 使用主题背景色，不再使用灰色渐变
  background: var(--main-bg-color, #f8fafc) !important;
  
  @media (min-width: 768px) {
    padding: var(--spacing-3) !important;
  }
  
  @media (min-width: 1024px) {
    padding: var(--spacing-3) var(--spacing-4) !important;
  }
  
  // 重置所有子元素的间距
  .el-row {
    margin: 0 !important;
    width: 100% !important;
    
    // 移除gutter间距
    &[class*="el-row--"] {
      margin-left: 0 !important;
      margin-right: 0 !important;
      
      .el-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }
  }
  
  // splitpanes组件样式重置
  .splitpanes {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: var(--main-bg-color, #f8fafc) !important; // 使用主题背景色
    
    .splitpanes__pane {
      margin: 0 !important;
      padding: var(--spacing-2) !important;
      box-sizing: border-box !important;
      overflow: auto !important;
      background: var(--main-bg-color, #f8fafc) !important; // 分割面板使用主题背景色
      
      @media (min-width: 768px) {
        padding: var(--spacing-3) !important;
      }
    }
    
    // 分割线样式
    .splitpanes__splitter {
      background: rgba(255, 255, 255, 0.3) !important; // 分割线使用半透明白色
      border-color: rgba(255, 255, 255, 0.2) !important;
      
      &:hover {
        background: rgba(255, 255, 255, 0.5) !important;
      }
    }
  }
  
  // 表格容器样式
  .el-table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
  }
  
  // 重置所有列组件
  .el-col {
    margin: 0 !important;
    padding: var(--spacing-2) !important;
    box-sizing: border-box !important;
    background: var(--main-bg-color, #f8fafc) !important; // 使用主题背景色
  }
  
  // 表单容器重置
  .el-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    
    .el-form-item {
      margin-bottom: var(--spacing-3) !important;
    }
  }
  
  // 头部容器重置
  .head-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: var(--spacing-3) !important;
    box-sizing: border-box !important;
    background: var(--main-bg-color, #f8fafc) !important; // 使用主题背景色
  }
  
  // 按钮行重置
  .mb8 {
    margin-bottom: var(--spacing-3) !important;
  }
  
  // 树形控件容器
  .el-tree {
    width: 100% !important;
    padding: 0 !important;
    background: var(--main-bg-color, #f8fafc) !important; // 使用主题背景色
    
    // 树节点样式
    .el-tree-node {
      .el-tree-node__content {
        background: transparent !important;
        
        &:hover {
          background: var(--table-hover-bg-color, rgba(59, 130, 246, 0.15)) !important; // 使用侧边栏颜色的悬停效果
        }
      }
      
      &.is-current > .el-tree-node__content {
        background: var(--table-hover-bg-color, rgba(59, 130, 246, 0.15)) !important; // 选中状态使用侧边栏颜色
      }
    }
  }
  
  // 分页组件
  .pagination {
    width: 100% !important;
    margin: var(--spacing-3) 0 0 0 !important;
    padding: 0 !important;
  }
}

// 针对AppMain页面容器的超宽布局优化
.page-container:has(.ultra-wide-layout),
.modern-app-main .page-container:has(.ultra-wide-layout) {
  padding: var(--spacing-2) !important;
  width: 100% !important;
  max-width: 100% !important;
  
  @media (min-width: 768px) {
    padding: var(--spacing-3) !important;
  }
  
  @media (min-width: 1024px) {
    padding: var(--spacing-3) var(--spacing-4) !important;
  }
}

// 更直接的方法 - 通过父容器选择器
.modern-app-main:has(.ultra-wide-layout) {
  .page-container {
    padding: var(--spacing-2) !important;
    width: 100% !important;
    max-width: 100% !important;
    
    @media (min-width: 768px) {
      padding: var(--spacing-3) !important;
    }
    
    @media (min-width: 1024px) {
      padding: var(--spacing-3) var(--spacing-4) !important;
    }
  }
}

// 强制重置Element Plus的gutter系统
.ultra-wide-layout [class*="el-row"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  
  > [class*="el-col"] {
    padding-left: var(--spacing-1) !important;
    padding-right: var(--spacing-1) !important;
  }
}

// 专门针对splitpanes的优化
.ultra-wide-layout .splitpanes--horizontal > .splitpanes__pane,
.ultra-wide-layout .splitpanes--vertical > .splitpanes__pane {
  padding: var(--spacing-2) !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

// 防止水平滚动条出现
.ultra-wide-layout {
  overflow-x: hidden !important;
  
  * {
    box-sizing: border-box !important;
  }
  
  // 确保所有子元素不超出容器
  > * {
    max-width: 100% !important;
  }
}

// 确保主体容器不溢出
body {
  overflow-x: hidden !important;
}

html {
  overflow-x: hidden !important;
}

// 专门处理用户管理页面的splitpanes表格显示问题
.ultra-wide-layout .splitpanes {
  .splitpanes__pane {
    overflow: visible !important;
    
    // 右侧表格面板特殊处理
    &:last-child {
      .el-table {
        // 确保表格可以完整显示
        table-layout: auto !important;
        
        // 表格列自适应宽度
        .el-table__header-wrapper,
        .el-table__body-wrapper {
          overflow-x: auto !important;
        }
        
        // 固定列宽的列保持最小宽度
        .el-table-column--selection {
          width: 50px !important;
          min-width: 50px !important;
        }
        
        // 操作列保持固定宽度
        .small-padding.fixed-width {
          width: 150px !important;
          min-width: 150px !important;
        }
      }
      
      // 分页组件确保可见
      .pagination {
        margin-top: var(--spacing-3) !important;
        width: 100% !important;
        overflow: visible !important;
      }
    }
  }
}

// 黑暗模式下的超宽布局背景色优化
html.dark {
  .ultra-wide-layout {
    background: #000000 !important; // 纯黑色背景
    
    // 所有容器背景色统一
    .el-row,
    .el-col {
      background-color: #000000 !important; // 纯黑色背景
    }
    
    // splitpanes 背景色
    .splitpanes {
      background-color: #000000 !important; // 纯黑色背景
      
      .splitpanes__pane {
        background-color: #000000 !important; // 纯黑色背景
      }
      
      // 分割线颜色
      .splitpanes__splitter {
        background-color: rgba(255, 255, 255, 0.1) !important; // 淡白色分割线
        border-color: rgba(255, 255, 255, 0.05) !important;

        &:hover {
          background-color: rgba(255, 255, 255, 0.2) !important;
        }
      }
    }
    
    // 搜索表单区域背景
    .el-form {
      background-color: transparent !important;
      
      .el-form-item {
        background-color: transparent !important;
      }
    }
    
    // 头部容器背景
    .head-container {
      background-color: #000000 !important; // 纯黑色背景
    }
    
    // 按钮行背景
    .mb8 {
      background-color: transparent !important;
    }
    
    // 树形控件容器背景
    .el-tree {
      background-color: #000000 !important; // 纯黑色背景
      color: var(--color-gray-200) !important;
      
      .el-tree-node {
        .el-tree-node__content {
          background-color: transparent !important;
          color: var(--color-gray-200) !important;
          
          &:hover {
            background-color: var(--table-hover-bg-color, rgba(255, 255, 255, 0.05)) !important; // 使用统一的悬停颜色
          }
        }
        
        &.is-current > .el-tree-node__content {
          background-color: var(--table-hover-bg-color, rgba(255, 255, 255, 0.05)) !important; // 选中状态
        }
      }
    }
  }
  
  // 页面组件背景色 - 纯黑色
  .page-component {
    background-color: #000000 !important;
    
    .ultra-wide-layout {
      background-color: #000000 !important;
    }
  }
  
  // AppMain 容器背景 - 纯黑色
  .modern-app-main {
    background-color: #000000 !important;
    
    .page-container {
      background-color: #000000 !important;
      
      .page-component {
        background-color: #000000 !important;
      }
    }
  }
}